<template>
  <div class="container">
    <Breadcrumb :MenuName="MenuName" :transmitName="'会员中心'" />
    <My-Menu :MenuRoutes="MenuRoutes.children" code=""></My-Menu>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from "vue";

export default defineComponent({
  name: "Use",
});
</script>

<script setup lang="ts">
import { userMenuRoutes } from "@/router/routes"; //路由菜单
// import Menu from "@/components/Menu/index.vue";
import { useRoute } from "vue-router";
const MenuRoutes = ref(userMenuRoutes); //路由菜单数据

const route = useRoute(); // 获取路由器对象
const MenuName = ref(); // 点击的当前路由的name

// 监听路由切换并把名字赋值给面包屑
watch(
  () => route,
  (v) => {
    MenuName.value = v.meta.name; // 把路由改变的当前name赋值给面包屑
  },
  { deep: true, immediate: true }
);
</script>

<style scoped>
.container {
  margin: 0 auto;
  width: 1200px;
  min-height: 700px;
  padding: 15px 0;
  color: #7f7f7f;
}

.container >>> .el-breadcrumb {
  padding-left: 30px;
}
</style>
